<template>
  <el-row>
    <el-container style="height:660px;">
      <el-col :span="11" style="border:1px solid rgba(121, 121, 121, 1)">
        <el-aside style="height:100%; padding:0;width:100%">
          <courseDetails></courseDetails>
        </el-aside>
      </el-col>
      <el-col :span="12" style="border:1px solid rgba(121, 121, 121, 1);margin-left:12px;">
        <el-main style="height:100%;">
          <courseAnnouncement></courseAnnouncement>
        </el-main>
      </el-col>
    </el-container>
  </el-row>
</template>

<script>
import courseDetails from "./courseDetails.vue";
import courseAnnouncement from "./courseAnnouncement.vue";

export default {
  components: {
    courseDetails,
    courseAnnouncement
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.el-divider--horizontal {
  margin: auto;
  width: 92%;
}
</style>